<template>
  <div class="monitor">
    <div class="monitor-top">
      <el-button type="primary" @click="">点数</el-button>
      <el-button type="primary" @click="">估重</el-button>
      <el-button type="primary" @click="">全景截图</el-button>
      <el-button type="primary" @click="">局部截图</el-button>
      <el-button type="primary" @click="">关闭局部视图</el-button>
    </div>
    <div class="monitor-middle">
      <video
          ref="videoRef"
          src="@/assets/test.mp4"
          width="600"
          height="420"
          autoplay
          controls
      ></video>
    </div>
    <div class="monitor-bottom">
      <div class="setting">
        <div class="setting-title">环控概率</div>
        <div class="setting-list">
          <div class="block green">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">平均</div>
          </div>
          <div class="block">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">最低</div>
          </div>
          <div class="block">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">最高温度</div>
          </div>
          <div class="block">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">湿度</div>
          </div>
          <div class="block">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">氨气浓度</div>
          </div>
          <div class="block">
            <div class="icon">
              {{ 456 }}
            </div>
            <div class="label">CO2浓度</div>
          </div>
        </div>
      </div>
      <!-- 
3、设备概览：风机，水帘图标绿色开启，灰色关闭。 -->
      <div class="setting">
        <div class="setting-title">设备概览</div>
        <div class="setting-list">
          <div class="block">
            <div class="label"></div>
            <div class="icon">
              <el-icon>
                <Warning/>
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup></script>

<style scoped lang="scss">
.monitor {
  width: 100%;

  &-top {
    display: flex;
    margin-bottom: 10px;

    .el-button {
      margin-right: 20px;
    }
  }

  &-bottom {
    margin-top: 20px;
    display: flex;

    .setting {
      margin-right: 20px;

      &-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      &-list {
        display: flex;

        .block {
          width: 80px;
          margin-right: 5px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .icon {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>
